<!--
 * @Author: daidai
 * @Date: 2022-02-28 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-10-25 09:18:22
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->
<template>
  <Echart id="leftCenter" :options="options" class="left_center_inner" v-if="pageflag" ref="charts" />
  <Reacquire v-else @onclick="getData" style="line-height:200px">
    重新获取
  </Reacquire>
</template>

<script>
import { currentGET } from 'api/modules'
import * as echarts from 'echarts'; // 导入 ECharts

export default {
  data() {
    return {
      options: {},
      pageflag: true,
      timer: null
    };
  },
  created() {
    this.getData(); // 组件创建时获取数据
  },
  beforeDestroy() {
    this.clearData(); // 组件销毁前清除定时器
  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    getData() {
      this.pageflag = true; // 显示图表区域

      // 模拟异步获取数据
      currentGET('leftCenter').then(res => {
        // 在这里根据获取的数据设置 ECharts options
        this.setChartOptions(res.data);
      }).catch(error => {
        console.error('Error fetching data:', error);
        // 在实际应用中，你可能希望在获取数据失败时执行一些操作，比如显示错误信息或重试按钮等
      });
    },
    setChartOptions(data) {
      // 在这里根据获取的数据设置 ECharts options
      // 这里是你原始的 ECharts option 设置代码
      const keys = Object.keys(data.data);
      let keyData = [];
      let valuesData = [];
      // 遍历键数组，并通过键来访问对应的值
      keys.forEach(key => {
        const values = data.data[key];
        console.log("Key:", key);
        keyData.push(key)
        valuesData.push(values);
        console.log("Values:", values);
      });

      this.options = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          textStyle: {
            color: '#ffffff', // 字体颜色
            fontSize: 12,     // 字体大小
            // 其他样式属性，如 fontWeight、fontFamily 等
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: data.province
          ,axisLabel: {
              interval: 0,
              rotate: 45
            },

          },
        ],
        yAxis: [
          {
            type: 'value',

            splitLine: {
              show: false // 隐藏Y轴的网格线
            }
          }
        ],
        dataZoom: [
          {
            show: true,
            type: 'slider',
            bottom: 18,
            height: 1,//组件高度
            start: 0,
            end: 10,
            minValueSpan: 4
          }
        ],


        series: [
          {
            name: keyData[0],
            type: 'bar',
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            data: valuesData[0],

          },
          {
            name: keyData[1],
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: valuesData[1]
          },
          {
            name: keyData[2],
            type: 'bar',
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            data: valuesData[2]
          },
          {
            name: keyData[3],
            type: 'bar',
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            data: valuesData[3]
          },
          {
            name: keyData[4],
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: valuesData[4]
          },
          {
            name: keyData[5],
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: valuesData[5]
          },
          {
            name: keyData[6],
            type: 'bar',
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            data: valuesData[6]
          }
          // 其他系列数据...
        ]
      };
    }
  }
};
</script>
<style lang='scss' scoped>
</style>
